<template>
  <div class="container">
    <!--上传按钮  -->
    <el-button type="primary" size="small" @click="dialogFormVisible = true"
      >新增房间</el-button
    >
    <!-- 表格table -->
    <el-table
      :data="roomListPage"
      :header-cell-style="{ background: '#F5F7FA' }"
    >
      <el-table-column type="index" :index="indexNum" label="序号" align="center"/>
      <el-table-column prop="userName" label="租户" align="center"/>
      <el-table-column prop="floor" label="楼层" align="center"/>
      <el-table-column prop="roomNumber" label="房间号" align="center"/>
      <el-table-column prop="roomType" label="房间类型" align="center"/>
      <el-table-column prop="rent" label="租金" align="center"/>
      <el-table-column prop="electy" label="电费" align="center"/>
      <el-table-column prop="water" label="水费" align="center"/>
      <el-table-column fixed="right" label="操作" align="center">
        <template #default="scope">
          <el-button
            type="text"
            size="small"
            @click.prevent="editorRoom(scope.row)"
          >
            编辑
          </el-button>
          <el-popconfirm
            title="确定删除?"
            @confirm="deleteRoomInfo(scope.row.id)"
          >
            <template #reference>
              <el-button type="text" size="small"> 删除 </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :page-sizes="pageSizeDefault"
      :page-size="pageSize"
      v-model:currentPage="currentpage"
      background
      layout="total,sizes, prev, pager, next, jumper"
      :total="roomListLength"
    >
    </el-pagination>
    <!-- 对话框 -->
    <el-dialog
      v-model="dialogFormVisible"
      :title="editorVisible ? '编辑房间' : '新增房间'"
      @close="closeDialog"
    >
      <el-form
        ref="formRef"
        :model="form"
        label-width="85px"
        class="container-form"
        label-position="left"
      >
        <el-form-item label="租户">
          <el-select
            v-model="form.userName"
            class="m-2"
            clearable
            filterable
            placeholder="请选择租户"
            size="large"
          >
            <el-option
              v-for="item in userList"
              :key="item.userName"
              :label="item.userName"
              :value="item.userName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="楼层">
          <el-input v-model="form.floor"></el-input>
        </el-form-item>
        <el-form-item label="房间号">
          <el-input v-model="form.roomNumber"></el-input>
        </el-form-item>
        <el-form-item label="房间类型">
          <el-select
            v-model="form.roomType"
            class="m-2"
            clearable
            placeholder="请选择房间类型"
            size="large"
          >
            <el-option
              v-for="item in roomTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="租金">
          <el-input v-model="form.rent"></el-input>
        </el-form-item>
        <el-form-item label="电费">
          <el-input v-model="form.electy"></el-input>
        </el-form-item>
        <el-form-item label="水费">
          <el-input v-model="form.water"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="close">关闭</el-button>
          <el-button v-if="editorVisible" type="primary" @click="updateRoomInfo"
            >提交</el-button
          >
          <el-button v-else type="primary" @click="addRoomInfo">新增</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import {
  getAllRoomList,
  addRoom,
  updateRoom,
  deleteRoom,
  getAllUser,
} from "@/api";
import { defineComponent, onMounted, ref, reactive } from "vue";
import { ElMessage } from "element-plus";

export default defineComponent({
  components: {},
  setup() {
    const roomList = ref([]);
    const roomListPage = ref<any>([]);
    const currentpage = ref(1 as number);
    const pageSize = ref(3 as number);
    const pageSizeDefault = ref([3, 5, 10, 15, 20]);
    const roomListLength = ref(0);
    const dialogFormVisible = ref(false);
    const editorVisible = ref(false);
    const oldPage = ref(-1);
    const form = reactive({
      roomId: "",
      userName: "",
      floor: "",
      roomNumber: "",
      roomType: "",
      rent: "",
      electy: "",
      water: "",
    });
    const roomTypeList = [
      {
        value: "1",
        label: "精修",
      },
      {
        value: "2",
        label: "简约",
      },
      {
        value: "3",
        label: "复式",
      },
    ];
    const userList = ref([]);
    // 获取用户名
    const initUserList = async () => {
      await getAllUser().then((res) => {
        userList.value = res;
      });
    };
    // 初始化获取数据
    const initRoomList = async () => {
      await getAllRoomList().then((res) => {
        res.forEach((item: any) => {
          if (item.roomType == 1) {
            item.roomType = "精修";
          } else if (item.roomType == 2) {
            item.roomType = "简约";
          } else {
            item.roomType = "复试";
          }
        });
        roomList.value = res;
        roomListLength.value = res.length;
        if (oldPage.value == -1) {
          handleCurrentChange(1);
        } else {
          handleCurrentChange(oldPage.value);
        }
      });
    };
    // ui组件table 序号
    const indexNum = (index: number) => {
      return (currentpage.value - 1) * pageSize.value + index + 1;
    };
    //处理数据,分页
    const handleTableData = () => {
      roomListPage.value = roomList.value.slice(
        (currentpage.value - 1) * pageSize.value,
        currentpage.value * pageSize.value
      );
    };
    // 每页显示多少条
    const handleSizeChange = (val: number) => {
      pageSize.value = val;
      handleTableData();
    };
    //点击中间页的按钮 执行的方法
    const handleCurrentChange = (val: number) => {
      oldPage.value = val;
      currentpage.value = val;
      handleTableData();
    };
    // 对话框关闭
    const close = () => {
      form.userName = "";
      form.floor = "";
      form.roomNumber = "";
      form.roomType = "";
      form.rent = "";
      form.electy = "";
      form.water = "";
      form.roomId = "";
      dialogFormVisible.value = false;
    };
    // 点击×号关闭
    const closeDialog = () => {
      form.userName = "";
      form.floor = "";
      form.roomNumber = "";
      form.roomType = "";
      form.rent = "";
      form.electy = "";
      form.water = "";
      form.roomId = "";
    };
    // 编辑房间
    const editorRoom = (val: any) => {
      editorVisible.value = true;
      dialogFormVisible.value = true;
      form.userName = val.userName;
      form.floor = val.floor;
      form.roomNumber = val.roomNumber;
      form.rent = val.rent;
      form.electy = val.electy;
      form.water = val.water;
      form.roomId = val.id;
      for (let i = 0; i < roomTypeList.length; i++) {
        if (val.roomType == roomTypeList[i].label) {
          form.roomType = roomTypeList[i].value;
        }
      }
    };
    // 更新房间
    const updateRoomInfo = async () => {
      if (form.userName == "" || form.floor == "" || form.roomType == "") {
        ElMessage.error("提交信息不完整！");
      } else {
        await updateRoom(form).then((res) => {
          if (res.data === 1) {
            ElMessage.success("更新成功！");
          }
          form.userName = "";
          form.floor = "";
          form.roomNumber = "";
          form.roomType = "";
          form.rent = "";
          form.electy = "";
          form.water = "";
          dialogFormVisible.value = false;
          initRoomList();
        });
      }
    };
    // 新增房间
    const addRoomInfo = async () => {
      if (form.userName == "" || form.floor == "" || form.roomType == "") {
        ElMessage.error("提交信息不完整！");
      } else {
        await addRoom(form).then((res) => {
          if (res.data === 1) {
            ElMessage.success("新增成功！");
          }
          form.userName = "";
          form.floor = "";
          form.roomNumber = "";
          form.roomType = "";
          form.rent = "";
          form.electy = "";
          form.water = "";
          dialogFormVisible.value = false;
          oldPage.value = -1;
          initRoomList();
        });
      }
    };
    //删除房间
    const deleteRoomInfo = async (val: number) => {
      await deleteRoom(val).then((res) => {
        if (res.data === 1) {
          ElMessage.success("删除用户成功！");
        }
        initRoomList();
        // for (let i = 0; i < roomListPage.value.length; i++) {
        //   if (roomListPage.value[i].id == val) {
        //     roomListPage.value.splice(i, 1); //删除不请求数据，直接在数组中删除
        //     roomListLength.value = roomListLength.value - 1;
        //     break;
        //   }
        // }
      });
    };
    onMounted(() => {
      initRoomList();
      initUserList();
    });
    return {
      roomList,
      roomListPage,
      indexNum,
      pageSize,
      pageSizeDefault,
      currentpage,
      roomListLength,
      handleCurrentChange,
      handleSizeChange,
      editorRoom,
      dialogFormVisible,
      form,
      roomTypeList,
      updateRoomInfo,
      addRoomInfo,
      close,
      editorVisible,
      oldPage,
      deleteRoomInfo,
      userList,
      closeDialog,
    };
  },
});
</script>

<style lang="scss" scoped>
.container {
  display: block;
  .el-button {
    margin-bottom: 6px;
  }
  .el-table {
    margin-bottom: 20px;
  }
  .el-pagination {
    display: flex;
    justify-content: flex-end;
  }
}
</style>